<template>
	<view>
		<zero-loading type="circle" v-if="loading"></zero-loading>
		<view class="title "></view>
		<scroll-view scroll-y="true" class="scroll-Y" :style='{ height: mainHeight }' @scrolltoupper="" @scrolltolower="">
			<form>
				
				<view class="cu-bar search padding-left-lg padding-right-lg">
					<view class="title padding-left label text-gray">所属场区 <text
							class="margin-xs text-orange">*</text></view>
					<view class="action">
						<view  class=" text-gray padding-right-sm ">{{farmname}}
						</view>
						<view  class="flex justify-right text-xl">
							<text class="cuIcon-location text-olive "></text>
						</view>
					</view>
				</view>
										
				<view class="cu-bar search padding-left-lg padding-right-lg">
					<view class="title padding-left label">单元名称 <text class="margin-xs text-orange">*</text></view>
					<view class="search-form round-sm">
						<!-- <text class="cuIcon-search text-white"></text> -->
						<input class="text-black padding-left" @input="onKeyInput" @focus="InputFocus()" @blur="InputBlur()"
							:adjust-position="false" maxlength="50" type="text" placeholder="必填" confirm-type="search"
							v-model="housename"></input>
					</view>
				</view>
				
				<view class="padding-left-lg padding-right-lg">
					<view class="cu-form-group ">
						<view class="title label">单元类型 <text class="margin-xs text-orange">*</text></view>
						<picker @change="houseTypePickerChange" :value="houseTypePickerIdx" :range="houseTypeData">
							<view class="picker">
								{{houseTypePickerIdx>-1?houseTypeData[houseTypePickerIdx]:''}}
							</view>
						</picker>
					</view>
				</view>
				
				<view class="cu-bar search padding-left-lg padding-right-lg">
					<view class="title padding-left label">排序号 <text class="margin-xs text-orange">*</text></view>
					<view class="search-form round-sm">
						<!-- <text class="cuIcon-search text-white"></text> -->
						<input class="text-black padding-left" @input="onKeyInput" @focus="InputFocus()" @blur="InputBlur()"
							:adjust-position="false" maxlength="10" type="number" placeholder="" confirm-type="search"
							v-model="sort"></input>
					</view>
				</view>
							
				<view class="padding-xl padding-top">
					<button @tap="onConfirm" class="cu-btn block bg-blue margin-tb-sm lg round">
						<text class=""></text> 保存</button>
				</view>	
			</form>
		</scroll-view>
	</view>
</template>

<script>
	import * as api from 'common/api.js';
	import * as util from '../../common/util.js'
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	var formatLocation = util.formatLocation;
	import {
		API_HEAD
	} from '../../common/api';
	export default {
		data() {
			return {
				scrollHeight: 0,
				mainHeight:0,
				loading:false,
				title: '',
				
				
		
				id:'',
				farmid:'',
				farmname:'',
				housename:'',
				sort:0,
				type:'',
		
				
				houseTypeData:['妊娠舍','哺乳舍','保育舍','育肥舍','公猪舍'],
				houseTypePickerIdx:0,
				
				
			}
		},
		onReady() {
			// 计算scroll-view高度
			uni.getSystemInfo({
				success: resu => {
					//console.info("窗口高度:", resu.windowHeight)
					const query = uni.createSelectorQuery()
					query.select('.title').boundingClientRect()
					query.exec(res => {
		
						//console.info("顶部下拉区域:", res[0])
						this.mainHeight = resu.windowHeight - res[0].height - 20 + 'px';
						this.scrollHeight = resu.windowHeight - res[0].height - 100 + 'px';
						console.log('剩余高度', this.mainHeight);
					})
				}
			})
		},
		onLoad(option) {
			console.info("onLoad", option)
			
			this.id = option.id
			this.housename = option.housename
			this.farmname = option.farmname
			this.farmid = option.farmid
			if (this.id != '' ) {
				this.loadHouse()
			}
			
			console.log(this.housename)
			console.log(this.farmname)
			
		},
		onShow: function() {
			console.info("onShow")
			var title = ""
			if(!this.id || this.id==''){
				title="新增单元"
			}else{
				title="修改["+this.housename+"]"
			}
			uni.setNavigationBarTitle({
				title: title
			});
		},
		methods: {
			InputFocus() {
			},
			InputBlur() {
			},
			onKeyInput(){
			},

			houseTypePickerChange:function(e){
				this.houseTypePickerIdx = e.detail.value
			},
			loadHouse(){
				var that = this
				var token = getApp().getToken()
				api.myRequest({
					url: '/Api/House',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						id: that.id
					},
				}, false).then(res => {
					if (res.code >= 0) {
						console.log(res)
						var items = res.data;
						if (items.length > 0) {
							var obj = items[0]
							that.farmid = obj.farmid
							that.housename = obj.housename
							that.farmname = obj.farmname
							that.sort = obj.sort
							that.type = obj.type

							that.houseTypePickerIdx = that.type-1
						}
					} else {

					}
				}).catch(err => {
					console.log(err)
				})
			},
			onConfirm(){
				this.type = this.houseTypeData[this.houseTypePickerIdx]
				if(this.type=="" ){
					uni.showModal({
						title: "数据缺失",
						content: "请选择单元类型",
						showCancel: false,
						confirmText: "确定"
					})
					return
				}
				if(this.housename==""){
					uni.showModal({
						title: "数据缺失",
						content: "单元名称不能为空",
						showCancel: false,
						confirmText: "确定"
					})
					return
				}
				var that = this
				that.saveHouse()
			},
			
			saveHouse(){
				var that = this
				var token = getApp().getToken()
				that.loading = true
				var method = '';
				if(that.id==''){
					method = "POST";
				}else{
					method = "PUT"
				}
				api.myRequest({
					url: '/Api/House',
					method: method,
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization': 'Bearer ' + token + ''
					},
					data: {
						id: that.id,
						farmid: that.farmid,
						housename:that.housename,
						type:that.houseTypePickerIdx+1,
						sort:that.sort,
						
					},
				}, false).then(res => {
					that.loading = false
					if (res.code >= 0) {
						
						uni.showToast({
							title: '保存成功',
							duration: 2000
						});
						uni.navigateBack()
					} else {
						uni.showModal({
							title: "错误",
							content: res.msg,
							showCancel: false,
							confirmText: "确定"
						})
					}
				}).catch(err => {
					that.loading = false
					console.log(err)
				})
			},
		}
	}
</script>

<style>
	.title {
	    text-align: justify;
	    padding-right: 16px;
	    font-size: 16px;
	    position: relative;
	    height: 33px;
	    line-height: 33px;
	    color: #aaa;
	}
	
	.label{
		width: 120px;
	}
	.round-sm{
		border-radius: 5px;
	}
	.cu-form-group {
	    background-color: transparent;
	    padding: 0.5px 16px;
	    display: flex;
	    align-items: center;
	    min-height: 55px;
	    justify-content: space-between;
	    border: 0px;
	}
	.cu-form-group uni-picker .picker {
	    color: #333;
	}
	
	/* .pupop .popup-box {
	    background: #ff0000 !important;
	} */
</style>
